<template>
	<view :style="[AppSkinVar]">
		<view class="u-p-20">
			<view class="header u-flex c-white text-center">
				<view class="people u-flex-xy-center u-rela">
					<view>
						<view class="u-font-48 fw-500">
							{{ info.salesVolume || 0 }}
						</view>
						<view class="u-font-26 u-m-t-10">
							{{ $t('yuncang.总销量') }}
						</view>
					</view>
				</view>
				<view class="u-flex-xy-center">
					<view>
						<view class="u-font-48">
							{{ info.salesAmount || 0 }}
						</view>
						<view class="u-font-26 u-m-t-10">
							{{ $t('yuncang.销售总金额') }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-p-24 u-font-32 text-center   line-h-44">· {{ $t('yuncang.销售明细') }} ·</view>
		<view class="list">
			<scroll-view scroll-y @scrolltolower="getList" lower-threshold="60">
				<template v-if="list.length">
					<view class="u-m-b-20 bg-white" v-for="(item, index) in list" :key="item.id">
						<yuncangGoodsCard :goods="item" :goodsKeys="{
			image: 'commodityPhoto',
			price: 'commodityPrice',
			name: 'commodityName',
			qty: 'commodityQty',
		}"></yuncangGoodsCard>
						<view class="list-user-box u-flex u-flex-between">
							<view class="u-flex">
								<u-avatar class="u-m-r-12" :src="$fullLink(item.buyHeadPhoto)" shape="circle" size="48rpx"></u-avatar>
								<text>{{ item.buyNickname }}</text>
							</view>
							<text class="c-65 u-font-24">{{$timeFormat(item.createTime , 'yyyy-mm-dd hh:MM')}}</text>
						</view>
					</view>
					<load-more v-if="list.length" :showLoad="showLoad"></load-more>
				</template>
				<empty v-else paddingTop="100rpx" :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" :show="emptyShow"></empty>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getStockSoldInfo, getStockSoldList } from 'api/yuncang.js'
import yuncangGoodsCard from './child/yuncang-goods-card.vue'
export default {
	components:{
		yuncangGoodsCard
	},
	data() {
		return {
			info: {},
			list: [],
			showLoad: false,
			pageNum: 1,
			isGet: true
		}
	},
	computed: {
		emptyShow() {
			return !this.list.length
		}
	},
	onLoad() {
		getStockSoldInfo().then(res => {
			if (res.code === 200) {
				this.info = res.summary
			}
		})
		this.getList()
	},
	methods: {
		getList() {
			if (this.isGet && !this.showLoad) {
				this.showLoad = true
				getStockSoldList({
					pageNum: this.pageNum,
					pageSize: 10
				}).then(res => {
					this.showLoad = false
					if (res.code == 200) {
						let loadRes = this.$pageLoad(this.list, res.list, this.pageNum, 10)
						
						this.pageNum = loadRes.pageNo
						if (this.list.length == res.total) {
							this.isGet = false
						}
					}
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.line-h-44 {
	line-height: 44rpx;
}
.c-f0 {
	color: #f0841a;
}
.header {
	height: 216rpx;
	background: var(--gradient-primary);
	> view {
		flex: 0 0 50%;
		width: 50%;
	}
	.people {
		&::after {
			content: '';
			position: absolute;
			width: 2rpx;
			height: 72rpx;
			right: 0;
			top: calc(50% - 36rpx);
			background: #ffffff;
			opacity: 0.2;
		}
	}
}
.list {
	height: calc(100vh - 348rpx);
	scroll-view {
		height: 100%;
	}
	&-user-box {
		padding: 16rpx 30rpx;
	}
	.c-65 {
		color: #656565;
	}
}
</style>
